<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">{{$C.systemName}}</h3>
      <el-form-item prop="account">
        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder=" ">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
                ref="password"
                v-model="loginForm.password"
                :type="passwordType"
                auto-complete="off"
                placeholder=""
                @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
        <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>
      <el-form-item prop="code">
        <div class="flex-x-between" style="width: 100%">
          <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" style="width: 70%"  @keyup.enter.native="handleLogin"/>
          <img :src="captchaUrl" @click="getCaptcha" class="login-code-img"/>
        </div>
      </el-form-item>
      <el-form-item style="width:100%;margin-top: 15px">
        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
          <span v-if="!loading">登录</span>
          <span v-else>登录中...</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import setting from './setting'
import { setToken } from "@/utils/token"
export default {
    name: "Login",
    data() {
        return {
            captchaUrl:"",
            loginForm: {
                username: "admin",
                password: "222222",
                // uuid:"",
                code: "1",
            },
            loginRules: setting.rules,
            passwordType: 'password',
            loading: false,
            redirect: undefined,
        };
    },
    watch: {
        $route: {
            handler: function(route) {
                this.redirect = route.query && route.query.redirect;
            },
            immediate: true
        }
    },
    created() {
    },
    methods: {
        /** 获取验证码*/
        async getCaptcha() {
            let _ = this
            // const { data: res } = await _.$H.post(_.$A.captcha, {})
            // _.captchaUrl = res.data.image
            // _.loginForm.uuid = res.data.uuid
        },
        /** 登录 */
        handleLogin() {
            let _ = this
            _.$refs.loginForm.validate(async valid => {
                if (valid) {
                    _.loading = true;
                    const {data: res} = await _.$H.post(_.$A.login, _.loginForm)
                    if (res.code == 200) {
                        setToken(res.data.token)
                        _.$router.push({path: this.redirect || "/"})
                    } else {}
                    _.loading = false
                }
            });
        },
        /** 显示、隐藏密码 */
        showPwd() {
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
            this.$nextTick(() => {
                this.$refs.password.focus()
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import "index.less";
</style>
